<template>
  <div class="layout">
    <Layout>
      <Header class="header">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1" to="/home/index">
              <Icon type="ios-navigate"></Icon>
              首页
            </MenuItem>
            <MenuItem name="2" to="/PersonCenter">
              <Icon type="ios-keypad"></Icon>
              个人中心
            </MenuItem>
            <MenuItem name="3" to="/Myphotos">
              <Icon type="ios-keypad"></Icon>
              我的图库
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-log-out"></Icon>
              <span @click="logout()">退出登录</span>
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Icon type="md-menu" :size="30" class="iconTitle" />
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff'}">
          <Menu
            :active-name="this.$route.name"
            theme="light"
            width="auto"
            :open-names="['1']"
          >  
          <!-- 动态渲染左侧菜单栏 判断登录登录进来携带的用户id来进行权限判断,然后动态删减数据 -->
            <Submenu :name="index" v-for="(item,index) in PowerMenu" :key="index">
              <template slot="title">
                <Icon :type="item.icon"></Icon>
                {{item.MenuItem}}
              </template>
              <MenuItem v-for="(itemarr,i) in item.Itemarr" :name="itemarr.name" :to="itemarr.to" :key="i" >{{itemarr.title}}</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '20px 24px 20px' }">
          <Content
            :style="{minHeight: '850px', background: '#171717',padding: '20px'}"
          >
          <KeepAlive>
            <router-view></router-view>
          </KeepAlive>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import { addControls } from 'quill';
import { mapGetters} from 'vuex'
export default {
data(){
  return{
    Routerarr:[],
    currentRouter:"",
    PowerMenu:[
    /** 学生管理 */
    {
       MenuItem:"学生管理",
       icon:"ios-navigate",
       Itemarr:[
        {
            name:"tab1",
            to:"/home/tab1",
            title:"位置"
        },
        {
            name:"tab2",
            to:"/home/tab2",
            title:"Image Upload"
        },
        {
            name:"tab3",
            to:"/home/tab3",
            title:"Option 3"
        }
       ]

    },
    {
        MenuItem:"我的论坛",
        icon:"ios-keypad",
        Itemarr:[
         {
             name:"tab4",
             to:"/home/tab4",
             title:"稀土掘金"
         },
         {
             name:"tab5",
             to:"/home/tab5",
             title:"bilibili"
         }
        ]
 
     },
     {
        MenuItem:"DemoProject",
        icon:"ios-analytics",
        Itemarr:[
         {
             name:"tab6",
             to:"/home/tab6",
             title:"Option 6"
         },
         {
             name:"tab7",
             to:"/home/tab7",
             title:"Option 7"
         }
        ]
 
     },
     {
      MenuItem:"ChatRoom",
        icon:"ios-analytics",
        Itemarr:[
         {
             name:"tab8",
             to:"/home/tab8",
             title:"聊天室"
         },
        ]
     },

],

role:""
  }
},
methods:{
logout(){
  window.sessionStorage.clear();
  this.$router.push('/login');
},
handleChange(items){
  console.log(items)
  this.$router.push(items.path)
},
/** 删除tag事件 */
linkto(path){
  console.log(path)
},
//根据对象数组中某一属性删除该项
removeByValue(arr, attr, value){ 
      var index = 0;
      for(var i in arr){
        if(arr[i][attr] == value){
          index = i;
          arr.splice(index,1);
          console.log("被删除啦")
          break;
        }
      }
    },
},

created(){
  /** 权限校验 */
  console.log("身份",this.$route.query.role);
  this.role = this.$route.query.role;
  if(this.role === 'admin'){
    this.PowerMenu.pop();
  }else{
    return
  }
},
watch: {
    $route: {
      handler(to, from) {
        console.log(to, "totototo");//跳转的路由
        console.log(from, "fromfrom");//当前的路由
        const obj = {
          fullPath:to.fullPath,
          name:to.name
        }
        this.Routerarr.push(obj)
      },
      immediate: true,
      deep: true,
    },
  },

}
</script>
<style scoped>
::v-deep .layout {
  background: #f5f7f9;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}
/* .ivu-layout-header {
  background-color: #141437 !important;
}
.ivu-menu-dark {
  background-color: #141437 !important;
}
.ivu-menu-light {
  background-color: #141437 !important;
}
.ivu-layout {
  background-color: #0f0f29 !important;
} */
.iconTitle {
  position: absolute;
  
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 500px;
  margin: 0 auto;
  margin-right: 20px;
}
@media (max-width:768px ){
.header {
  display: none
}

};
</style>
